<%-- 
    Document   : main
    Created on : 2012-8-20, 14:40:21
    Author     : Icer
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>IT菜菜项目----收支明细管理</title>
        <link rel="stylesheet" href="../easyui/themes/default/easyui.css">
        <link rel="stylesheet" href="../style.css" />
        <link rel="stylesheet" href="../easyui/themes/icon.css">
        <script src="../easyui/jquery-1.8.0.min.js"></script>
        <script src="../easyui/jquery.easyui.min.js"></script>
    </head>
    <body class="easyui-layout">
        <div region="north" split="true" style="height:70px;background-color:lavender">
            <jsp:include page="top.jsp"></jsp:include>
        </div>
        <div region="west" split="true" title="菜单" style="width:150px;">
            <ul id="tree"></ul>
        </div>
        <div  region="center" style="padding:5px;">  
            <div class="easyui-tabs" fit="true" border="false" id="tabs">
                <div title="首页">
                </div>
            </div>
        </div>
        <div region="south" split="true" style="height: 29px;" align="center">
            <!--<div style="padding: 0px; margin-left: 50%;" align="center">-->
            <a href="http://www.itcaicai.com" target="_blank">IT菜菜成就IT梦想</a>
            <!--</div>-->
        </div>
        <div id="tabsMenu" class="easyui-menu" style="width:120px;">  
            <div name="close">关闭</div>  
            <div name="Other">关闭其他</div>  
            <div name="All">关闭所有</div>
        </div>
    </body>
    <script>
        $(function() {
            //动态菜单数据
            var treeData = [{
                    text: "流水账管理菜单",
                    children: [{
                            text: "收支管理",
                            state: "closed",
                            children: [{
                                text: "收入管理",
                                attributes: {
                                    url: "../ShowAllIn.do?showPage=0"
                                }
                            },{
                                text:"支出管理",
                                attributes:{
                                    url:"../ShowAllOut.do?showPage=0"
                                }
                            }]
                            
                        }, {
                            text: "分类管理",
                            state: "closed",
                            children: [{
                                    text: "收入分类",
                                    attributes: {
                                        url: "../ItemIn.do"
                                    }
                                }, {
                                    text: "支出分类",
                                    attributes: {
                                        url: "../ItemOut.do"
                                    }
                                }
                            ]
                        },{
                            text:"账户状态",
                            attributes:{
                                url:"../Status.do"
                            }
                        },{
                            text:"修改密码",
                            attributes:{
                                url:"../changepwd.jsp"
                            }
                        },{
                            text:"退出系统",
                            attributes:{
                                url:"../Quit.do"
                            }
                        }
                    ]
                }
            ];
            function createFrame(url) {
                var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:99%;overflow-y: auto; "></iframe>';
                return s;
            }
            //实例化树形菜单
            $("#tree").tree({
                data: treeData,
                lines: true,
                onClick: function(node) {
                    if (node.attributes) {
                        Open(node.text, node.attributes.url);
                    }
                }
            });
            //在右边center区域打开菜单，新增tab
            function Open(text, url) {
                if ($("#tabs").tabs('exists', text)) {
                    $('#tabs').tabs("close", text);
                    $('#tabs').tabs('add', {
                        title: text,
                        content: createFrame(url),
                        closable: true
                    });
                    
                } else {
                    $('#tabs').tabs('add', {
                        title: text,
                        content: createFrame(url),
                        closable: true
                    });
                }
            }

            //绑定tabs的右键菜单
            $("#tabs").tabs({
                onContextMenu: function(e, title) {
                    e.preventDefault();
                    $('#tabsMenu').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("tabTitle", title);
                }
            });

            //实例化menu的onClick事件
            $("#tabsMenu").menu({
                onClick: function(item) {
                    CloseTab(this, item.name);
                }
            });
            
            //几个关闭事件的实现
            function CloseTab(menu, type) {
                var curTabTitle = $(menu).data("tabTitle");
                var tabs = $("#tabs");

                if (type === "close") {
                    tabs.tabs("close", curTabTitle);
                    return;
                }

                var allTabs = tabs.tabs("tabs");
                var closeTabsTitle = [];

                $.each(allTabs, function() {
                    var opt = $(this).panel("options");
                    if (opt.closable && opt.title != curTabTitle && type === "Other") {
                        closeTabsTitle.push(opt.title);
                    } else if (opt.closable && type === "All") {
                        closeTabsTitle.push(opt.title);
                    }
                });

                for (var i = 0; i < closeTabsTitle.length; i++) {
                    tabs.tabs("close", closeTabsTitle[i]);
                }
            }
        });
    </script>
</html>
